<template>
  <div class="live-broadcast card-page">
    <video id='video'
      class="my-video video-js vjs-default-skin vjs-big-play-centered" />
  </div>
</template>

<script>
  export default {
    name: 'LiveBroadcast',
    data() {
      return {
        // 要进行播放的rtmp地址
        // nowPlayVideoUrl: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
        // nowPlayVideoUrl: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
        // nowPlayVideoUrl: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
        nowPlayVideoUrl: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'
        // nowPlayVideoUrl: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
        // nowPlayVideoUrl:
        //   'rtmp://live-push.bilivideo.com/live-bvc/?streamname=live_701587711_73348113&key=58d8c82c459002998c257d97937f42cb&schedule=rtmp&pflag=1'
      };
    },
    mounted() {
      this.initVideoPlayer();
    },
    methods: {
      // 初始化播放器方法
      initVideoPlayer() {
        // 第一个选中的要播放的video标签, 记得是video标签,
        const currentInstance = this.$video(document.querySelector('#video'), {
          autoplay: true, // 是否自动播放
          controls: true // 是否显示控件
        });

        currentInstance.src({
          src: this.nowPlayVideoUrl,
          type: 'rtmp/flv' // 这个type值必写, 告诉videojs这是一个rtmp流视频
          // type: 'application/x-mpegURL' // 这个type值必写, 告诉videojs这是一个hls流视频
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .live-broadcast {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    #video {
      width: 600px;
      height: 400px;
    }
  }
</style>